<template>
  <div class="card">
    <div class="card-header" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary" @click="back"><i class="zmdi zmdi-arrow-left"></i>&nbsp;&nbsp;返回课程</el-button>
          <el-button type="text" :loading="isLoading"></el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="card-body card-padding">
      <el-tabs active-name="content" @tab-click="handleTabClick">
        <el-tab-pane label="图文介绍" name="content">
          <div class="content">
            <div class="pull-left">
              <img class="title-img" alt="" :src="curLesson.title_image">
              <div>
                <dl class="dl-horizontal">
                  <dt>ID:</dt>
                  <dd>{{curLesson.id}}</dd>
                </dl>
                <dl class="dl-horizontal">
                  <dt>课时名称:</dt>
                  <dd>{{curLesson.title}}</dd>
                </dl>
                <dl class="dl-horizontal">
                  <dt>上课时间:</dt>
                  <dd>{{curLesson.start_time}}</dd>
                </dl>
                 <dl class="dl-horizontal">
                  <dt>课时视频:</dt>
                  <dd style="width: 200px;">
                    <el-button type="success" size="mini" @click="handldPlay(curLesson.video)">点击播放</el-button>
                    <!--<img class="title-img" alt="" v-bind:src="curLesson.video.snapshot_url">-->
                  </dd>
                </dl>
              </div>
            </div>
            <div class="content-body" v-html="curLesson.introduction"></div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="录制视频" name="video">
          <div class="list">
            <div v-for="video in curLesson.records" class="item">
              <div class="item-body">
                <div class="lgi-heading">
                  <label style="margin-right: 10px">{{video.title}}</label>
                  <el-button type="text" size="mini" @click="handldPlay(video)">播放</el-button>
                </div>
                <small v-if="video.net_vid" class="lgi-text">网易视频云Id：{{video.net_vid}}</small>
                <small v-if="video.url" class="lgi-text">视频地址：{{video.url}}</small>
                <ul class="lgi-attrs">
                  <li>创建时间：{{video.create_time}}</li>
                </ul>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="测试习题" name="test">
          <lesson-test v-bind:cur-test-id="testId" />
        </el-tab-pane>
        <el-tab-pane label="评论列表" name="comment">
          <info-comment v-bind:cur-lesson-id="lessonIdForComment" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="视频播放" v-model="showPlayerDialog" :close-on-click-modal='false' @close="stopPlayVideo">
      <video ref="player" style="width: 100%;height: 100%" controls="controls" autoplay="autoplay">
        浏览器不支持播放
        <source type="video/mp4" v-bind:src="palyVideoUrl"/>
      </video>
    </el-dialog>
  </div>
</template>

<script>
  import API from '../../../api'
  import InfoComment from './lesson-comment.vue'
  import InfoTest from './lesson-test.vue'
  import InfoVideo from './lesson-video.vue'

  export default {
    components: {
      'info-comment': InfoComment,
      'lesson-test': InfoTest,
      'lesson-video': InfoVideo
    },
    data: function () {
      return {
        showPlayerDialog: false,
        palyVideoUrl: '',
        curLessonId: '',
        testId: '',
        lessonIdForComment: '',
        curLesson: {},
        isLoading: false
      }
    },
    created: function () {
      // 组件创建完后获取数据，此时 data 已经被 observed 了
      this.curLessonId = this.$route.params.lessonId
      this.fetchData()
    },
    methods: {
      handldPlay: function (video) {
        if (video.type === 2) {
          window.open(video.url)
          return
        }
        API.videoDetail({id: video.id}, (data) => {
          if (!data || !data.url) return
          this.palyVideoUrl = data.url
          this.startPlayVideo()
        })
        this.showPlayerDialog = true
      },
      stopPlayVideo: function () {
        this.$refs.player.pause()
        this.palyVideoUrl = ''
      },
      startPlayVideo: function () {
        if (this.$refs.player) {
          this.$refs.player.load()
          this.$refs.player.play()
        }
      },
      handleTabClick: function (tab) {
        if (tab.name === 'test' && this.curLesson.test_id) {
          this.testId = this.curLesson.test_id
          return
        }
        if (tab.name === 'comment' && this.curLesson.id) {
          this.lessonIdForComment = this.curLesson.id
          return
        }
      },
      back: function () {
        this.$router.replace('/course/list/' + this.$route.params.courseId)
      },
      fetchData: function () {
        this.isLoading = true
        var params = { 'id': this.curLessonId }
        API.lessonInfo(params,
          (data) => {
            this.isLoading = false
            this.curLesson = data

            var breadcrumbs = []
            breadcrumbs.push({
              index: '/course/list/' + this.$route.params.courseId,
              name: '课程信息'
            })
            breadcrumbs.push({
              index: this.$route.path,
              name: data.title
            })
            this.$store.dispatch('updateBreadcrumb', breadcrumbs)
          }
        )
      }
    },
    beforeRouteLeave: function (to, from, next) {
      this.$store.dispatch('updateBreadcrumb', [])
      next()
    }
  }

</script>

<style scoped>
  image {
    max-width: 100%!important
  }
  .content {
    margin: 10px 0px;
    overflow: auto;
    padding: 0px 10px;
  }
  .content .pull-left {
    border-right: 2px solid #eee;
    padding-right: 10px
  }

  .title-img {
    min-width: 100px;
    min-height: 100px;
    max-width: 300px;
    max-height: 300px;
    border-radius: 3px;
    margin-bottom: 5px;
    margin-top: 5px;
  }

  .content-body {
    display: table-cell;
    padding: 0px 10px 0px 10px
  }

  dt {
    width: 70px;
  }

  dd {
    margin-left: 80px;
    max-width: 350px;
  }
  .lgi-heading {
    color: #000;
    font-weight: 500;
    margin: 3px 0px
  }

  .lgi-heading,
  .lgi-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .lgi-attrs>li,
  .lgi-text {
    font-size: 12px;
    color: #777
  }

  .lgi-attrs {
    list-style: none;
    padding: 0;
    margin: 8px 0px
  }

  .lgi-attrs>li {
    display: inline-block;
    border: 1px solid #f0f0f0;
    margin: 2px 2px 2px 0;
    padding: 2px 5px
  }
</style>
